import React from 'react';
import { Form, FormInstance, Input,  } from 'antd';
import { FormItem } from './interface';
import { Rule } from 'antd/es/form';

const onFinish = (values: any) => {
  // console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  // console.log('Failed:', errorInfo);
};

interface VFormProps {
  formItems: FormItem[],
  form:FormInstance
}

const VForm: React.FC<VFormProps> = ({formItems,form}) => {

  return (
    <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
    form={form}
  >
  
    {formItems.map((item,index)=>{
      if(item.type==="input"){
        return (
          <Form.Item
          key={"formItem-"+item.name}
          name={item.name}
          label={item.label}     
          initialValue={''}  
          rules={[{ required: item.required, message: `请输入${item.label}!` },item.rule?item.rule:{}]}
        >
          <Input />
        </Form.Item>
        )
      }
      else if(item.type==="custom"){
        const rules= item.rule?[{...item.rule}]:[]
        return (
          <Form.Item
          key={"formItem-"+item.name}
          initialValue={''}  
          label={item.label}
          name={item.name}
          rules={[{ required: item.required, message: `请输入${item.label}!` },...rules]}
        >
         {item.customNode }
        </Form.Item>
        )
      }
    })}
    

    {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item> */}
  </Form>
  )

  };

export default VForm;